<template>
	<view class="artice" v-if="card.id">
		<image :src="card.image" mode="aspectFill" class="bg"></image>
		
		<view class="content flex_center">
			<view class="content_left">
				<view class="top flex_center">
					<image class="avatar" :src="card.avatar" mode="aspectFill"></image>
					<view class="text_box">
						<view class="name flex_center">
							<text class="nickname hidden">{{ card.nickname }}</text>
							<view class="tag flex_center">
								<view class="online"></view>
								<text>在线</text>
							</view>
						</view>
						<view class="age flex_center">
							<view class="tag flex_center">
								<image src="/static/guild/sex_man_blue.png"></image>
								<text>{{ card.age || '' }}</text>
								<!-- <image src="/static/guild/sex_women_red.png"></image> -->
							</view>
							<view class="tag flex_center">
								<text class="hidden">{{ card.area || '' }}</text>
								<!-- <image src="/static/guild/sex_women_red.png"></image> -->
							</view>
						</view>
					</view>
				</view>
				<view class="bottom hidden_3">
					{{ card.content || 'Ta什么也没有留下' }}
				</view>
			</view>
			
			<view class="content_right flex_c">
				<view class="item flex_c">
					<image :src="$util.prefix('public/index_icon1.png')" mode="aspectFill"></image>
					<text>收藏</text>
				</view>
				<view class="item flex_c">
					<image :src="$util.prefix('public/index_icon2.png')" mode="aspectFill"></image>
					<text>评论</text>
				</view>
				<view class="item flex_c">
					<image :src="$util.prefix('public/index_icon3.png')" mode="aspectFill"></image>
					<text>点赞</text>
				</view>
				<view class="item flex_c">
					<image :src="$util.prefix('public/index_icon4.png')" mode="aspectFill"></image>
					<text>私信</text>
				</view>
			</view>
		</view>
	</view>
	
	<view class="loading" v-else>
		<HevuLoading type="loading2" :opacity="0" loadingText="正在努力加载..." text-color="#FD2A53"
			loadingIconColor="#FD2A53" />
	</view>
</template>

<script>
	import HevuLoading from '@/components/hevu-loading/hevu-loading.vue';
	export default {
		components: {
			HevuLoading,
		},
		data() {
			return {
				card: {},
			}
		},
		methods: {
			
		},
		
		created() {
			
		}
	}
</script>

<style scoped lang="less">
	.artice {
		width: 100%;
		height: 100%;
		border-radius: 24rpx;
		overflow: hidden;
		position: relative;
		.bg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
		}
	}
	
	.content {
		width: 100%;
		height: 100%;
		align-items: flex-end;
		padding: 32rpx 20rpx;
		position: relative;
		z-index: 3;
		overflow: hidden;
	}
	
	.content_left {
		flex: 1;
		overflow: hidden;
		.top {
			margin-bottom: 8rpx;
			.avatar {
				width: 36rpx;
				height: 36rpx;
				border-radius: 18rpx;
				margin-right: 8rpx;
			}
			
			.text_box {
				.name {
					.nickname {
						font-weight: 500;
						font-size: 16rpx;
						color: #FFFBFB;
						line-height: 16rpx;
						margin-right: 8rpx;
					}
					
					.tag {
						height: 16rpx;
						background: rgba(81,81,81,0.3);
						border-radius: 4rpx;
						backdrop-filter: blur(1.9968px);
						padding-right: 8rpx;
						
						.online {
							width: 8rpx;
							height: 8rpx;
							border-radius: 4rpx;
							background: #CCCCCC;
							opacity: 0.4;
							margin: 0 4rpx;
						}
						
						text {
							font-weight: 500;
							font-size: 10rpx;
							line-height: 10rpx;
							color: #FFFFFF;
						}
					}
				}
			
				.age {
					margin-top: 8rpx;
					.tag {
						height: 16rpx;
						background: rgba(81,81,81,0.3);
						border-radius: 4rpx;
						backdrop-filter: blur(1.9968px);
						padding: 0 8rpx;
						margin-right: 4rpx;
						
						image {
							width: 12rpx;
							height: 12rpx;
							margin-right: 4rpx;
						}
						
						
						text {
							font-size: 10rpx;
							color: #FFFFFF;
						}
					}
				}
			}
		}
		
		.bottom {
			font-size: 12rpx;
			color: #FFFBFB;
			line-height: 16rpx;
		}
		
	}
	
	.content_right {
		.item {
			margin-top: 16rpx;
			image {
				width: 32rpx;
				height: 32rpx;
			}
			text {
				font-weight: 400;
				font-size: 12rpx;
				color: #FFFBFB;
			}
		}
	}
	
</style>